Html-Jquery Sample Code (1)


/*html source code --> menu button */

<body style="background-color: white;">

 <header class="header">
  <h1 class="header-title">content</h1>
  <nav class="header-nav">
   <div class="header-tab">
    <div class="compose">
     <div class="btn">
        <span class="bar1"></span>
        <span class="bar2"></span>
        <span class="bar3"></span>
     </div>
     <div class="menu">
      <ol class="header-menu">
        <li><a href="">Top</a></li>
        <li><a href="">List</a></li>
        <li><a href="">Sample</a></li>
        <li><a href="">HTML Sample</a></li>
      </ol>
     </div>
    </div>
   </div>
  </nav>
 </header>

JS Sample Code (2)

/*JS source code --> menu button */

$(".btn").on("click", function(){
$(".btn").toggleClass("close-btn");
$(".menu").toggleClass("open-menu");
$(".header-menu").toggleClass("pop-menu");
});

CSS Sample Code (3)

/*CSS source code --> menu button */

.pop-menu { margin: 0; padding: 5px; background-color: #5576a3; text-align: left; font-weight: normal; display: block; justify-content: center; font-size: 14px; line-height: 20px; word-break: normal; }
Back